<template>
  <div class="app-container">
    <!-- 轮播图 -->
    <el-row :gutter="20" class="banner-row">
      <el-col :span="24">
        <el-carousel height="400px" class="hotel-banner">
          <el-carousel-item>
            <el-image :src="require('@/assets/image/banner1.png')" class="banner-image" fit="fill"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <!-- <el-row :gutter="20" class="search-row">
        <el-col :span="24">
          <el-card shadow="hover" class="search-card">
            <el-form :inline="true" class="search-form">
              <el-form-item label="入住日期">
                <el-date-picker
                  v-model="searchForm.checkInDate"
                  type="date"
                  placeholder="选择入住日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="退房日期">
                <el-date-picker
                  v-model="searchForm.checkOutDate"
                  type="date"
                  placeholder="选择退房日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="房间类型">
                <el-select v-model="searchForm.roomType" placeholder="选择房间类型">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="标准间" value="standard"></el-option>
                  <el-option label="豪华套房" value="luxury"></el-option>
                  <el-option label="行政套房" value="executive"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索房间</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row> -->

    <!-- 酒店介绍 -->
    <el-row :gutter="20" class="intro-row">
      <el-col :span="24">
        <el-card shadow="hover" class="intro-card">
          <div class="intro-content">
            <h2>关于我们</h2>
            <p>欢迎光临我们的酒店，我们提供舒适的住宿环境和优质的服务。酒店位于市中心，交通便利，周边设施齐全。我们拥有多种房型供您选择，满足不同需求。</p>
            <div class="feature-list">
              <div class="feature-item" v-for="(item, index) in features" :key="index">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 推荐房型 -->
    <el-row :gutter="20" class="room-row">
      <el-col :span="24">
        <el-card shadow="hover" class="room-card">
          <div slot="header" class="card-header">
            <span>推荐房型</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card shadow="hover" class="room-item">
                <el-image :src="require('@/assets/image/f1.jpg')" class="room-image"></el-image>
                <div class="room-info">
                  <h3>豪华套房</h3>
                  <p class="room-desc">宽敞舒适的豪华套房，配备独立客厅和卧室</p>
                  <el-button type="primary" @click="handleBook(room)">立即预订</el-button>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
            <el-card shadow="hover" class="room-item">
              <el-image :src="require('@/assets/image/f2.jpg')" class="room-image"></el-image>
              <div class="room-info">
                <h3>行政套房</h3>
                <p class="room-desc">温馨舒适的标准间，适合商务出行</p>
                <el-button type="primary" @click="handleBook(room)">立即预订</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="room-item">
              <el-image :src="require('@/assets/image/f3.jpg')" class="room-image"></el-image>
              <div class="room-info">
                <h3>豪华套房</h3>
                <p class="room-desc">高端大气的行政套房，享受尊贵体验</p>
                <el-button type="primary" @click="handleBook(room)">立即预订</el-button>
              </div>
            </el-card>
          </el-col>
          </el-row>
 
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户服务 -->
    <el-row :gutter="20" class="service-row">
      <el-col :span="24">
        <el-card shadow="hover" class="service-card">
          <div slot="header" class="card-header">
            <span>用户服务</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(service, index) in services" :key="index">
              <div class="service-item">
                <div class="service-icon">
                  <i :class="service.icon"></i>
                </div>
                <h3>{{ service.name }}</h3>
                <p>{{ service.description }}</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      searchForm: {
        checkInDate: '',
        checkOutDate: '',
        roomType: ''
      },
      features: [
        { name: '免费WiFi', icon: 'el-icon-wifi' },
        { name: '24小时前台', icon: 'el-icon-service' },
        { name: '免费停车', icon: 'el-icon-car' },
        { name: '健身房', icon: 'el-icon-basketball' },
        { name: '餐厅', icon: 'el-icon-food' },
        { name: '会议室', icon: 'el-icon-office-building' }
      ],
      recommendedRooms: [
        {
          name: '豪华套房',
          description: '宽敞舒适的豪华套房，配备独立客厅和卧室',
          price: 888,
          image: "require('@/assets/image/f1.jpg')"
        },
        {
          name: '标准间',
          description: '温馨舒适的标准间，适合商务出行',
          price: 488,
          image: "require('@/assets/image/f2.jpg')"
        },
        {
          name: '行政套房',
          description: '高端大气的行政套房，享受尊贵体验',
          price: 1288,
          image: "require('@/assets/image/f3.jpg')"
        }
      ],
      services: [
        {
          name: '在线预订',
          description: '便捷的在线预订服务',
          icon: 'el-icon-s-order'
        },
        {
          name: '会员服务',
          description: '享受会员专属优惠',
          icon: 'el-icon-s-custom'
        },
        {
          name: '积分兑换',
          description: '积分兑换精美礼品',
          icon: 'el-icon-present'
        },
        {
          name: '客服支持',
          description: '24小时在线客服',
          icon: 'el-icon-service'
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      // 处理搜索逻辑
      this.$message.success('正在搜索房间...')
    },
    handleBook(room) {
      this.$router.push({
        path: '/hotel'
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 轮播图样式 */
.banner-row {
  margin-bottom: 20px;
}

.hotel-banner {
  border-radius: 8px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

/* 搜索区域样式 */
.search-row {
  margin-bottom: 20px;
}

.search-card {
  border: none;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 酒店介绍样式 */
.intro-row {
  margin-bottom: 20px;
}

.intro-card {
  border: none;
  background: white;
}

.intro-content {
  padding: 30px;
  text-align: center;
}

.intro-content h2 {
  margin-bottom: 20px;
  color: #303133;
  font-size: 24px;
}

.intro-content p {
  color: #606266;
  line-height: 1.8;
  margin-bottom: 30px;
}

.feature-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-item i {
  font-size: 24px;
  color: #409EFF;
}

/* 推荐房型样式 */
.room-row {
  margin-bottom: 20px;
}

.room-card {
  border: none;
  background: white;
}

.card-header {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.room-item {
  border: none;
  transition: all 0.3s ease;
}

.room-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.room-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.room-info {
  padding: 15px;
}

.room-info h3 {
  margin-bottom: 10px;
  color: #303133;
}

.room-desc {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.6;
}

.room-price {
  margin-bottom: 15px;
}

.price {
  font-size: 24px;
  color: #F56C6C;
  font-weight: bold;
}

.unit {
  color: #909399;
  font-size: 14px;
}

/* 用户服务样式 */
.service-row {
  margin-bottom: 20px;
}

.service-card {
  border: none;
  background: white;
}

.service-item {
  text-align: center;
  padding: 20px;
  transition: all 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.service-icon i {
  font-size: 28px;
  color: #409EFF;
}

.service-item h3 {
  margin-bottom: 10px;
  color: #303133;
}

.service-item p {
  color: #606266;
  font-size: 14px;
}
</style>